<template>
  <div class="search-page">
    <div class="big-box">
      <div class="box-label">通用标签:</div>
      <div :class="{ 'show-more': showText, 'item-box': true, 'item-box1':true }">
        <div
          :class="{ 'item': true, 'current': currentIndex == index, 'item1': true }"
          v-for="(item, index) in todos"
          :key="index"
          @click="clickTag(index, '0')"
        >
          {{ item.text }}
        </div>
      </div>
      <div class="text-span" v-if="isMore1" @click="showTag('0')">
        {{ showText ? "收起" : "展开" }}
        <i
          :class="{
            arrowTransform: !showText,
            arrowTransformReturn: showText,
            'el-icon-arrow-right': true,
          }"
        ></i>
      </div>
    </div>

    <div class="big-box">
      <div class="box-label">自定义标签:</div>
      <div :class="{ 'show-more': showText1, 'item-box': true,'item-box2':true }">
        <div
          :class="{ 'item': true, 'current': currentIndex1 == index, 'item2': true }"
          v-for="(item, index) in list"
          :key="index"
          @click="clickTag(index, '1')"
        >
          {{ item.text }}
        </div>
      </div>
      <div class="text-span" v-if="isMore2" @click="showTag('1')">
        {{ showText1 ? "收起" : "展开" }}
        <i
          :class="{
            arrowTransform: !showText1,
            arrowTransformReturn: showText1,
            'el-icon-arrow-right': true,
          }"
        ></i>
      </div>
    </div>
    <transition name="plus-icon">
      <div v-if="showMore" :class="{'more-box':true, 'click-more-box': showMore }">
        <el-input style="width:300px;margin-left:20px"></el-input>
        <el-input style="width:300px;margin-left:20px"></el-input>
        <el-input style="width:300px;margin-left:20px"></el-input>
      </div>
    </transition>
    <el-button size="small" @click="showMore = !showMore" style="margin-top:20px">更多条件</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMore: false,
      todos: [
        { text: "全部" },
        { text: "中共党员" },
        { text: "各民主党派" },
        { text: "无党派" },
        { text: "少数民族" },
        { text: "宗教教派" },
        { text: "中央国家级" },
        { text: "省、部级" },
        { text: "地、厅、局、局级" },
        { text: "县、处级" },
        { text: "中共党员1111" },
        { text: "中共党员2222" },
        { text: "中共党员3333" },
        { text: "中共党员444" },
      ],
      isMore1: false,      // 通用标签是否超过宽度
      isMore2: false,      // 自定义标签是否超过宽度
      showText: false,     // 通用标签是否点击展开/收起  false:收起 true:展开
      showText1: false,    // 自定义标签是否点击展开/收起  false:收起 true:展开
      currentIndex: "0",
      currentIndex1: "0",
      list: [
        { text: "中共党员2" },
        { text: "各民主党派2" },
        { text: "无党派2" },
        { text: "少数民族2" },
        { text: "宗教教派2" },
        // { text: "中央国家级2" },
        // { text: "省、部级2" },
        // { text: "地、厅、局、局级2" },
        // { text: "县、处级2" },
        // { text: "中共党员11" },
        // { text: "中共党员22" },
      ],
    };
  },
  methods: {
    // 点击展开/收起
    showTag(type) {
      if (type == "0") {
        // 控制通用标签
        this.showText = !this.showText;
      } else {
        // 控制自定义标签
        this.showText1 = !this.showText1;
      }
    },
    // 点击tag
    clickTag(index, type) {
      if (type == "0") {
        // 控制通用标签
        this.currentIndex = index;
      } else {
        // 控制自定义标签
        this.currentIndex1 = index;
      }
    },
    // 计算子元素是否超出父元素宽度
    watchWidth(parentBox, childBox) {
      let boxWidth = document.getElementsByClassName(parentBox)[0].offsetWidth;
      let itemWidth = document.getElementsByClassName(childBox);
      let num = 0;
      for (let i = 0; i < itemWidth.length; i++) {
        num = num + itemWidth[i].offsetWidth + 30; // 40是margin-left:40px
      }
      if (num > boxWidth) {
        return true;
      } else {
        return false;
      }
    },
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        // 通用标签
        this.isMore1 = this.watchWidth("item-box1", "item1");
        // 自定义标签
        this.isMore2 = this.watchWidth("item-box2", "item2");
      })();
    };
    window.onresize();
  },
};
</script>

<style lang="less" scoped>
.search-page {
  .big-box {
    display: flex;
    font-size: 14px;
    margin-bottom: 10px;
    .box-label {
      color: #606266;
      font-weight: bold;
      margin-right: 20px;
      min-width: 100px;
    }
    .item-box {
      float: left;
      width: 90%;
      // background: pink;
      // 主要是height给了固定值,加上overflow:hidden,展开时height给了auto即可展示完整
      height: 20px;
      overflow: hidden;
      .item {
        margin-right: 30px;
        float: left;
        cursor: pointer;
        margin-bottom: 10px;
      }
      .current {
        color: #527bee;
      }
    }
    .show-more {
      height: auto;
    }
    .text-span {
      float: left;
      cursor: pointer;
      min-width: 50px;
    }
    .arrowTransform {
      transition: 0.3s;
      transform-origin: center;
      transform: rotateZ(90deg);
    }
    .arrowTransformReturn {
      transition: 0.3s;
      transform-origin: center;
      transform: rotateZ(-90deg);
    }
  }

  // .more-box {
  //   background: pink;
  //   height: 60px;
  //   // display: none;
  //   transition:all 2s;
  // }
  // .click-more-box {
  //   display: block;
  //   background: blue;
  //   height: 300px;
  // }

  // .plus-icon-enter-active{
  //   transition:2s;
  // }
  // .plus-icon-enter{
  //    opacity: 0;
  //   //  background: pink;
  // }
  // .plus-icon-leave-active{
  //   transition:1s;
  // }
  // .plus-icon-leave-to{
  //   opacity: 1;
  //   // background: blue;
  // }

  .plus-icon-enter-active,.plus-icon-leave-active {
  transition: all 1s;
  max-height: 230px;
}
.plus-icon-enter,.plus-icon-leave-to
{
  opacity: 0;
  max-height: 0px;
}
}
</style>